<template>
    <div class="flex a-center j-between meta-center">
        <div class="title f-weight f16 flex a-center">
            <template v-if="$slots.left">
                <slot name="left"></slot>
            </template>
            <template v-else>
                <el-button
                    v-if="isShowAdd"
                    size="small"
                    type="primary"
                    text
                    @click="add"
                >
                    <MetaIcon name="Plus"></MetaIcon><span>新增</span>
                </el-button>
            </template>
        </div>
        <div class="right">
            <template v-if="$slots.right">
                <slot name="right"></slot>
            </template>
            <template v-else>
                <el-button
                    v-if="isShowHistory"
                    size="small"
                    text
                    type="primary"
                    @click="showHistory"
                    ><MetaIcon name="Clock"></MetaIcon
                    ><span>操作记录</span></el-button
                >
            </template>
        </div>
    </div>
</template>

<script setup>
import MetaIcon from '@/components/MetaIcon/index.vue'
const emits = defineEmits(['add', 'showHistory'])

const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: true
    },
    isShowHistory: {
        type: Boolean,
        default: true
    }
})

const add = () => {
    emits('add')
}
const showHistory = () => {
    emits('showHistory')
}
</script>

<style lang="scss" scoped>
.meta-center {
    margin-bottom: 10px;
}
</style>
